import { Tabs } from 'antd';
import React, { useRef, useState } from 'react';

const { TabPane } = Tabs;

const initialPanes = [
    { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
    { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
    {
        title: 'Tab 3',
        content: 'Content of Tab 3',
        key: '3',
    },
];
export default function Index(props: any) {
    const [activeKey, setActiveKey] = useState(initialPanes[0].key);
    const [panes, setPanes] = useState(initialPanes);
    const newTabIndex = useRef(0);

    const onChange = (newActiveKey: string) => {
        setActiveKey(newActiveKey);
    };
    return (
        <div>
            <Tabs type="editable-card" onChange={onChange} activeKey={activeKey}>
                {panes.map(pane => (
                    <TabPane tab={pane.title} key={pane.key}>
                        {pane.content}
                    </TabPane>
                ))}
            </Tabs>
        </div>
    )
}